<template>
    <div class="side-bar">
        <el-input
            v-model="searchKeyword"
            size="large"
            placeholder="请输入关键字"
        >
            <template #append>
                <el-button :icon="Search" @click="handleSearch()" />
            </template>
        </el-input>
        <div class="pt-[15px]">
            <NuxtLink :to="sideBarData.recommendAdvertImage.link">
                <img
                    :src="getUrl(sideBarData.recommendAdvertImage.image_url)"
                    width="100%"
                    alt="广告图"
                />
            </NuxtLink>
        </div>
        <div class="pt-[15px]">
            <comTitle title="推荐阅读" />
        </div>
        <div class="pt-[15px]">
            <ul v-show="sideBarData.recommendCms.length" class="article-list">
                <li
                    v-for="(item, index) in sideBarData.recommendCms"
                    :key="index"
                    class="article-item"
                >
                    <NuxtLink :to="{path:`/article/detail/${item.id}`}" class="w-full">
                        <div class="item-content">
                            <span class="item-index">{{ index + 1 }}</span>
                            <div class="title truncate">
                                {{ item.title }}
                            </div>
                        </div>
                        <div class="item-bottom">
                            <span class="views">
                                阅读：{{ item.actual_hits + item.init_hits }}
                            </span>
                            <span class="create-time">
                                发布时间：{{ item.create_time }}
                            </span>
                        </div>
                    </NuxtLink>
                </li>
            </ul>
        </div>
        <div class="pt-[15px]">
            <comTitle title="推荐图片" />
        </div>
        <div class="pt-[15px]">
            <el-carousel trigger="click" height="120px">
                <el-carousel-item
                    v-for="item in sideBarData.recommendBanner"
                    :key="item"
                >
                    <NuxtLink :to="item.link">
                        <img
                            :src="getUrl(item.image_url)"
                            width="100%"
                            alt="轮播图"
                        />
                    </NuxtLink>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
import useConfigStore from "@/stores/config";
import { getHomeData } from "@/api/home";
import { messageError } from "@/utils/message";
import { getUrl } from "@/utils/common";

const sideBarData = reactive({
    recommendBanner: [],
    recommendAdvertImage: {} as any,
    recommendCms: [],
});

const configStore = useConfigStore();

const getData = async () => {
    const res = await getHomeData({ type: 2 });
    sideBarData.recommendCms = res.recommend_cms;
};

const router = useRouter();
const route = useRoute();

const searchKeyword = ref(null);

const handleSearch = () => {
    if (!searchKeyword.value) {
        messageError("请输入关键词");
        return;
    }
    router.push({
        path: "/search",
        query: {
            keywords: searchKeyword.value,
        },
    });
};

watch(
    route,
    (routeNew) => {
        if (routeNew.path == "/search/index") {
            searchKeyword.value = routeNew.query.keywords;
        } else {
            searchKeyword.value = "";
        }
    },
    {
        immediate: true,
    }
);

onMounted(() => {
    sideBarData.recommendBanner =
        configStore?.styleConfig["recommendBanner"]["list"];
    sideBarData.recommendAdvertImage =
        configStore?.styleConfig["advertImage"]["recommend"];
    getData();
});
</script>

<style lang="scss" scoped>
.article-list {
    .article-item {
        display: flex;
        align-items: center;
        padding: 10px 0;

        .item-content {
            display: flex;
            width: 100%;

            .title {
                color: #424242;
                font-size: 14px;
                text-overflow: ellipsis;
            }

            .title a:hover {
                color: #06c;
            }

            .item-index {
                background: #e6f1fb;
                padding: 0 5px;
                margin-right: 10px;
                border-radius: 2px;
                color: #ddd;
            }
        }

        &:first-child {
            .item-index {
                background-color: #f00606;
                color: #fff;
            }
        }

        &:nth-child(2) {
            .item-index {
                background-color: #f24808;
                color: #fff;
            }
        }

        &:nth-child(3) {
            .item-index {
                background-color: #fb7818;
                color: #fff;
            }
        }

        &:nth-child(4) {
            .item-index {
                background-color: #cc6060;
                color: #fff;
            }
        }

        &:nth-child(5) {
            .item-index {
                background-color: #f56c6c;
                color: #fff;
            }
        }

        .item-bottom {
            padding: 5px 0;
            font-size: 12px;
            opacity: 0.65;
            border-bottom: 1px solid #ddd;

            span {
                margin-right: 15px;
            }
        }
    }
}
</style>
